<template>
	<view class="container">
		<view class="content">
			<image class="bgImg" :src="newyearItem.bgImage" mode="aspectFill"></image>
			<view class="head_stack" @click="setSignature">
				<image ref="headBox" class="head_box" mode="aspectFill"
					src="https://upload-images.jianshu.io/upload_images/668798-3dc677daa8c7d2ae.png"></image>
				<image class="head_img" mode="aspectFill" :src="userInfo.avatarUrl"></image>
			</view>
			<music ref='music' :musicSrc="musicSrcUrl"></music>
			<view class="head_nickName">
				<uni-notice-bar :speed="70" :scrollable="true" color="#ffffff" :single="true" :text=myBless />
			</view>

			<view class="inputView">
				<textarea class="textarea" v-model="content" placeholder-class="placeholder-class"
					placeholder="点此输入您的祝福语..." auto-height="true" confirm-hold="true" maxlength="66"
					v-if="!fromShare"></textarea>
				<text class="textarea" v-if="fromShare">{{content}}</text>
			</view>
			<view class="shareBtnC">
				<view class="shareBtnBg"></view>
				<button class="shareBtn" v-if="fromShare" @click="goHomePage()">我也去制作</button>
				<button class="shareBtn" open-type="share"
					v-if="!fromShare && userInfo.nickName !== ''">发送祝福给朋友</button>
				<button class="shareBtn" v-if="!fromShare && userInfo.nickName === ''"
					@click="setSignature()">去设置签名&定制祝福</button>
			</view>
		</view>
	</view>
</template>

<script>
	import music from '@/components/mumu-music/index.vue'
	import uninoticebar from '@/components/uni-notice-bar.vue'
	import libData from "@/data/newyearData.js"
	import sourceData from '../../data/sourceData.js'

	export default {
		onShareAppMessage() {
			return this.goShare()
		},
		onShareTimeline() {
			return this.goShare()
		},
		components: {
			music,
			'uni-notice-bar': uninoticebar
		},
		data() {
			return {
				fromShare: false, // 是否来自分享
				myBless: '新年祝福',
				defaultAvatar: 'http://lc-s0KE4Kw4.cn-n1.lcfile.com/509PLQimCbLnS0nbDXqVcT7h0zxscVdY/newyear.png',
				userInfo: {
					nickName: '',
					avatarUrl: 'http://lc-s0KE4Kw4.cn-n1.lcfile.com/509PLQimCbLnS0nbDXqVcT7h0zxscVdY/newyear.png'
				},
				zodiacIndex: 0, // 点击的哪个属相index 1
				zodiac: '', // 哪个属相 牛
				index: 0, // 点击的哪个祝福index
				newyearItem: {}, // 点击的哪个祝福
				musicSrcUrl: '',
				content: ''
			}
		},
		onLoad(options) {
			this.zodiacIndex = options.zodiacIndex
			this.index = options.index

			this.zodiac = libData.chineseZodiacList[this.zodiacIndex].title

			var classifyDic = libData.chineseZodiacList[this.zodiacIndex]
			this.newyearItem = classifyDic.blessList[this.index]

			this.content = this.newyearItem.content

			uni.setNavigationBarTitle({
				title: this.newyearItem.title
			});
			// 随机取出一首背景音乐
			let musicIdx = Math.floor(Math.random() * sourceData.bgMusics_newyear.length)
			this.musicSrcUrl = sourceData.bgMusics_newyear[musicIdx]
			this.myBless = this.zodiac + '年祝福'

			if (options.user) { // 点击分享过来的携带user数据
				this.fromShare = true
				this.content = options.content
				let user = JSON.parse(decodeURIComponent(options.user))
				this.userInfo = user
				this.myBless = (this.userInfo.nickName != '' ? this.userInfo.nickName : '好友') + ' 送来' + this.zodiac + '年祝福'
			} else {
				this.fromShare = false
			}
		},
		onShow() {
			if (!this.fromShare) {
				this.getUserInfo()
			}
		},
		onUnload() {
			this.$refs.music.stopMusic()
		},
		methods: {
			// 我也去制作
			goHomePage() {
				this.$refs.music.stopMusic()
				uni.switchTab({
					url: '/pages/homepage/home'
				});
			},

			// 去设置用户签名信息
			setSignature() {
				if (this.fromShare) {
					return;
				}
				uni.navigateTo({
					url: '/pages/usercenter/setsignature'
				})
			},

			// 取出用户授权后存储的数据
			getUserInfo() {
				uni.getStorage({
					key: 'userInfo',
					success: (res) => {
						if (res.data != '') {
							var avatarUrl = res.data.avatarUrl != '' ? res.data.avatarUrl : this.defaultAvatar
							this.userInfo = {
								nickName: res.data.nickName,
								avatarUrl: avatarUrl
							};
							this.myBless = (this.userInfo.nickName != '' ? this.userInfo.nickName : '好友') +
								' 送来' + this.zodiac + '年祝福'
						}
					}
				})
			},

			// share
			goShare() {
				let user = {
					'nickName': this.userInfo.nickName,
					'avatarUrl': this.userInfo.avatarUrl
				}
				return {
					title: '您收到一份来自好友' + this.userInfo.nickName + '的' + this.zodiac + '年祝福,快快点击查看吧.',
					imageUrl: this.newyearItem.bgImage,
					path: 'pages/newyear/newyeardetail' + '?index=' + this.index + '&zodiacIndex=' + this.zodiacIndex +
						'&user=' + encodeURIComponent(JSON
							.stringify(user)) + '&content=' + this.content
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;

		.content {
			display: flex;
			flex-direction: column;

			.bgImg {
				position: fixed;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: -1;
			}

			.head_stack {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 40rpx;

				.head_box {
					border-radius: 20rpx;
					position: absolute;
					z-index: 2;
					height: 300rpx;
					width: 300rpx;
					opacity: 1;
					animation-name: donghua;
					/*绑定到keyframe的名称*/
					animation-timing-function: ease-in-out;
					/*规定动画的速度曲线*/
					animation-iteration-count: infinite;
					/*规定动画应该播放的次数*/
					animation-duration: 0.7s;
					/*动画所花费的时间*/
					animation-direction: alternate;
					/*是否应该轮流反向播放动画*/
				}

				.head_img {
					border-radius: 130rpx;
					height: 260rpx;
					width: 260rpx;
				}
			}

			// 声明动画
			@keyframes donghua {
				0% {
					opacity: 1;
				}

				100% {
					opacity: 0;
				}
			}

			.head_nickName {
				align-self: center;
				padding-top: 30rpx;
				margin-top: 20rpx;
				border-radius: 20rpx;
				width: 400rpx;
				height: 60rpx;
				background-color: rgba($color: #5d09b6, $alpha: 0.4);
			}

			.inputView {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 600rpx;

				.textarea {
					text-align: center;
					margin-top: 50rpx;
					margin-left: 50rpx;
					margin-right: 50rpx;
					padding: 20rpx;
					font-size: 70rpx;
					font-weight: bold;
					color: #46b926;
					border-radius: 20rpx;
					background-color: rgba($color: #f4f4f4, $alpha: 0.2);
				}

				.placeholder-class {
					font-size: 50rpx;
					color: #ddd;
				}
			}

			.shareBtnC {
				display: flex;
				align-self: center;
				justify-content: center;
				align-items: center;
				position: sticky;
				bottom: calc(env(safe-area-inset-bottom));
				height: 90rpx;
				width: 500rpx;
				border-radius: 35rpx;
				background: linear-gradient(to top, #ef4447, #a40810);
				margin-top: 100rpx;

				.shareBtnBg {
					position: absolute;
					height: 90rpx;
					width: 500rpx;
					top: 0;
					left: 0;
					z-index: -1;
					border-radius: 35rpx;
					background: linear-gradient(to top, #ef4447, #a40810);
					border-radius: 35rpx;
					border: 10rpx solid #fecd87;

					opacity: 0;
					animation-name: donghua;
					/*绑定到keyframe的名称*/
					animation-timing-function: ease-in-out;
					/*规定动画的速度曲线*/
					animation-iteration-count: infinite;
					/*规定动画应该播放的次数*/
					animation-duration: 0.5s;
					/*动画所花费的时间*/
					animation-direction: alternate;
					/*是否应该轮流反向播放动画*/
				}

				.shareBtn {
					font-size: 40rpx;
					font-weight: bold;
					color: #fecd87;
					border-radius: 35rpx;
					background-color: rgba($color: #ffffff, $alpha: 0);
				}
			}
		}
	}
</style>
